<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实施服务明细 - 在线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 主要内容样式 */
        .main-content {
            padding: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
        }

        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #40a9ff;
        }

        .btn-default {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background-color: #e8e8e8;
        }

        /* 步骤导航 */
        .steps-container {
            display: flex;
            margin: 30px 0;
            position: relative;
        }

        .steps-container::before {
            content: '';
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f5f5f5;
            border: 2px solid #e8e8e8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-weight: bold;
            color: #999;
        }

        .step.active .step-icon {
            background-color: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }

        .step.completed .step-icon {
            background-color: #52c41a;
            border-color: #52c41a;
            color: #fff;
        }

        .step-title {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }

        .step.active .step-title {
            color: #1890ff;
            font-weight: 500;
        }

        .step.completed .step-title {
            color: #52c41a;
        }

        /* 表单样式 */
        .form-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .form-header {
            padding-bottom: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 15px;
        }

        .form-actions .btn {
            min-width: 100px;
        }

        /* 实施服务明细表格样式 */
        .service-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            border: 1px solid #e8e8e8;
            table-layout: fixed;
        }
        
        .service-table th, 
        .service-table td {
            border: 1px solid #e8e8e8;
            padding: 6px 10px;
            text-align: center;
            vertical-align: middle;
        }
        
        /* 确保所有表格列宽一致 */
        .service-table th:nth-child(1), .service-table td:nth-child(1) { width: 5%; }
        .service-table th:nth-child(2), .service-table td:nth-child(2) { width: 15%; }
        .service-table th:nth-child(3), .service-table td:nth-child(3) { width: 30%; }
        .service-table th:nth-child(4), .service-table td:nth-child(4) { width: 10%; }
        .service-table th:nth-child(5), .service-table td:nth-child(5) { width: 10%; }
        .service-table th:nth-child(6), .service-table td:nth-child(6) { width: 10%; }
        .service-table th:nth-child(7), .service-table td:nth-child(7) { width: 15%; }
        .service-table th:nth-child(8), .service-table td:nth-child(8) { width: 5%; }
        
        .service-table th {
            background-color: #f5f7fa;
            font-weight: 500;
            color: #333;
        }
        
        .amount-cell {
            text-align: right;
        }
        
        .service-input {
            width: 100%;
            padding: 4px 8px;
            border: none;
            border-radius: 0;
            background-color: transparent;
            box-sizing: border-box;
        }
        
        .service-input.text-right {
            text-align: right;
        }
        
        .add-row-btn {
            margin: 10px 0;
            background-color: #f5f5f5;
            border: 1px dashed #d9d9d9;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
        }
        
        .add-row-btn:hover {
            background-color: #e6f7ff;
        }
        
        .add-category-row {
            margin: 5px 0;
            background-color: #f5f5f5;
            border: 1px dashed #d9d9d9;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .add-category-row:hover {
            background-color: #e6f7ff;
            border-color: #91caff;
        }
        
        .not-applicable-checkbox {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333;
        }
        
        .category-header {
            background-color: #f0f5ff;
            font-weight: bold;
            padding: 11px 15px;
        }
        
        .category-header td {
            font-size: 20px;
            color: #333;
        }
        
        /* 服务类别标题行样式 */
        .category-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .category-title .title-text {
            font-weight: bold;
        }

        /* 按钮样式 */
        .btn-add {
    width: 11.2px;
    height: 11.2px;
    display: inline-block;
            cursor: pointer;
    position: relative;
    vertical-align: middle;
            transition: all 0.2s;
    margin: 0 3px;
}
        
.btn-add::before, .btn-add::after {
    content: '';
    position: absolute;
    background-color: #1890ff; /* blue color */
    transition: all 0.2s;
}

.btn-add::before { /* horizontal bar */
    left: 0;
    top: 50%;
    width: 100%;
    height: 2.1px;
    margin-top: -1.05px;
}

.btn-add::after { /* vertical bar */
    top: 0;
    left: 50%;
    height: 100%;
    width: 2.1px;
    margin-left: -1.05px;
}
        
.btn-add:hover::before, .btn-add:hover::after {
    background-color: #40a9ff;
}

.btn-delete {
            background-color: #ff4d4f;
    width: 8.4px;
    height: 1.4px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s;
    vertical-align: middle;
    margin: 0 3px;
}
        
        .btn-delete:hover {
            opacity: 0.8;
        }
        
        .operation-cell {
            white-space: nowrap;
            text-align: center;
        }
        
        .module-desc {
            text-align: left;
            padding: 15px;
            margin-top: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            margin-bottom: 20px;
        }

        /* 服务类别容器 */
        .service-category-container {
            position: relative;
            margin-bottom: 15px;
        }

        /* 服务名称靠左显示 */
        .service-name {
            text-align: left;
        }

        /* 确保文本区域也对齐 */
        .service-input textarea {
            resize: vertical;
            min-height: 48px;
            vertical-align: middle;
        }
        
        /* 添加服务按钮 */
        .btn-service-add {
            background-color: #1890ff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px auto;
            transition: all 0.3s;
        }
        
        .btn-service-add:hover {
            background-color: #40a9ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        }
        
        .btn-service-add i {
            margin-right: 5px;
        }
        
        /* 新的添加按钮样式 */
        .add-icon-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: #1890ff;
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-left: 10px;
        }
        
        .add-icon-btn:hover {
            background-color: #40a9ff;
            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .modal-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #888;
            line-height: 1;
        }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .preview-table th, .preview-table td {
            border: 1px solid #e8e8e8;
            padding: 10px 12px;
            text-align: left;
        }
        
        .preview-table th {
            background-color: #f9f9f9;
            font-weight: 500;
            text-align: center;
        }
        
        .preview-table .amount-preview-cell {
            text-align: right;
        }

        /* 数字输入框样式统一 */
        .service-input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
        }
        
        .service-input[type="number"]::-webkit-inner-spin-button, 
        .service-input[type="number"]::-webkit-outer-spin-button { 
            -webkit-appearance: none;
            margin: 0;
        }
        
        /* 确保只读字段也有统一样式 */
        .service-input[readonly] {
            background-color: transparent;
            cursor: default;
        }

        /* 文本区域容器样式 */
        .service-table td:has(textarea) {
            height: auto;
            vertical-align: top;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        
        /* 调整文本区域内边距，使其与输入框保持一致 */
        .service-input textarea {
            padding: 5px 8px;
            margin: 0;
        }
        
        /* 总计样式 */
        .total-container {
            text-align: right;
            margin: 20px 5px 20px 0;
            font-size: 18px;
        }

        .total-container .total-label {
            font-weight: bold;
            color: #333;
        }

        .total-container .total-value-input {
            font-weight: bold;
            color: #1890ff;
            border: none;
            background-color: transparent;
            text-align: right;
            font-size: inherit;
            width: 150px;
            padding: 0;
            margin: 0;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <!-- 步骤导航 -->
        <div class="steps-container">
            <div class="step completed">
                <div class="step-icon">1</div>
                <div class="step-title">基本信息</div>
            </div>
            <div class="step completed">
                <div class="step-icon">2</div>
                <div class="step-title">预算总表</div>
            </div>
            <div class="step completed">
                <div class="step-icon">3</div>
                <div class="step-title">产品购置明细</div>
            </div>
            <div class="step completed">
                <div class="step-icon">4</div>
                <div class="step-title">软件开发明细</div>
            </div>
            <div class="step active">
                <div class="step-icon">5</div>
                <div class="step-title">实施服务明细</div>
            </div>
            <div class="step">
                <div class="step-icon">6</div>
                <div class="step-title">市级政务云租用</div>
            </div>
        </div>

        <!-- 表单 -->
        <div class="form-container">
            <div class="form-header">
                <h2 class="form-title">实施服务明细表</h2>
                <div class="btn-group">
                    <button type="button" class="btn btn-default" id="previewBtn">
                        <i class="fas fa-eye"></i> 预览
                    </button>
                    <button type="button" class="btn btn-default" id="exportBtn">
                        <i class="fas fa-file-export"></i> 导出
                    </button>
                </div>
            </div>

            <form id="implementationForm">
                <div class="module-desc">
                    <p>本表填写项目实施、培训、测试等服务内容及费用明细。</p>
                </div>
                
                <!-- 实施服务明细表格 -->
                <div class="service-category-container">
                <table class="service-table" id="serviceTable">
                    <thead>
                        <tr>
                                <th>序号</th>
                                <th class="service-name">服务名称</th>
                                <th>服务内容描述</th>
                                <th>服务单位</th>
                                <th>数量</th>
                                <th>单价(万元)</th>
                                <th>金额(万元)</th>
                                <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="category-header">
                                <td colspan="7">
                                    <div class="category-title">
                                        <span class="title-text">实施服务</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="btn-add" data-category="impl" data-category-name="实施服务" title="添加"></span>
                                </td>
                        </tr>
                        <tr>
                            <td>1</td>
                                <td class="service-name"><input type="text" class="service-input" name="impl_name_1"></td>
                            <td><textarea class="service-input" name="impl_desc_1" rows="3"></textarea></td>
                            <td><input type="text" class="service-input" name="impl_unit_1"></td>
                            <td><input type="number" class="service-input" name="impl_quantity_1" data-row="1" data-type="impl"></td>
                            <td><input type="number" class="service-input text-right" name="impl_price_1" data-row="1" data-type="impl"></td>
                            <td><input type="text" class="service-input text-right" name="impl_amount_1" readonly></td>
                                <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="6" style="text-align: right;"><strong>实施服务小计：</strong></td>
                            <td><input type="text" class="service-input text-right" name="impl_total" readonly></td>
                            <td></td>
                        </tr>
                        <tr class="category-header">
                                <td colspan="7">
                                    <div class="category-title">
                                        <span class="title-text">培训服务</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="btn-add" data-category="training" data-category-name="培训服务" title="添加"></span>
                                </td>
                        </tr>
                        <tr>
                            <td>1</td>
                                <td class="service-name"><input type="text" class="service-input" name="training_name_1"></td>
                            <td><textarea class="service-input" name="training_desc_1" rows="3"></textarea></td>
                            <td><input type="text" class="service-input" name="training_unit_1"></td>
                            <td><input type="number" class="service-input" name="training_quantity_1" data-row="1" data-type="training"></td>
                            <td><input type="number" class="service-input text-right" name="training_price_1" data-row="1" data-type="training"></td>
                            <td><input type="text" class="service-input text-right" name="training_amount_1" readonly></td>
                                <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="6" style="text-align: right;"><strong>培训服务小计：</strong></td>
                            <td><input type="text" class="service-input text-right" name="training_total" readonly></td>
                            <td></td>
                        </tr>
                        <tr class="category-header">
                                <td colspan="7">
                                    <div class="category-title">
                                        <span class="title-text">测试服务</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="btn-add" data-category="testing" data-category-name="测试服务" title="添加"></span>
                                </td>
                        </tr>
                        <tr>
                            <td>1</td>
                                <td class="service-name"><input type="text" class="service-input" name="testing_name_1"></td>
                            <td><textarea class="service-input" name="testing_desc_1" rows="3"></textarea></td>
                            <td><input type="text" class="service-input" name="testing_unit_1"></td>
                            <td><input type="number" class="service-input" name="testing_quantity_1" data-row="1" data-type="testing"></td>
                            <td><input type="number" class="service-input text-right" name="testing_price_1" data-row="1" data-type="testing"></td>
                            <td><input type="text" class="service-input text-right" name="testing_amount_1" readonly></td>
                                <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="6" style="text-align: right;"><strong>测试服务小计：</strong></td>
                            <td><input type="text" class="service-input text-right" name="testing_total" readonly></td>
                            <td></td>
                        </tr>
                        <tr class="category-header">
                                <td colspan="7">
                                    <div class="category-title">
                                        <span class="title-text">项目管理</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="btn-add" data-category="management" data-category-name="项目管理" title="添加"></span>
                                </td>
                        </tr>
                        <tr>
                            <td>1</td>
                                <td class="service-name"><input type="text" class="service-input" name="management_name_1"></td>
                            <td><textarea class="service-input" name="management_desc_1" rows="3"></textarea></td>
                            <td><input type="text" class="service-input" name="management_unit_1"></td>
                            <td><input type="number" class="service-input" name="management_quantity_1" data-row="1" data-type="management"></td>
                            <td><input type="number" class="service-input text-right" name="management_price_1" data-row="1" data-type="management"></td>
                            <td><input type="text" class="service-input text-right" name="management_amount_1" readonly></td>
                                <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                        </tr>
                        <tr>
                            <td colspan="6" style="text-align: right;"><strong>项目管理小计：</strong></td>
                            <td><input type="text" class="service-input text-right" name="management_total" readonly></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                </div>

                <div class="total-container">
                    <span class="total-label">服务费用合计：</span>
                    <input type="text" class="total-value-input" name="service_total" readonly>
                </div>

                <div class="form-actions">
                    <button type="button" class="btn btn-default" id="prevBtn">
                        <i class="fas fa-arrow-left"></i> 上一步
                    </button>
                    <button type="button" class="btn btn-default" id="saveBtn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn">
                        下一步 <i class="fas fa-arrow-right"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="submitBtn" disabled>
                        确认提交审核
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div id="previewModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h2>实施服务明细表预览</h2>
                <button class="modal-close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <!-- 预览表格将由JavaScript动态插入 -->
            </div>
        </div>
    </div>

    <script>
        // 自定义提示框
        function showCustomAlert(message) {
            // 检查是否已存在提示框
            let alertBox = document.getElementById('customAlertBox');
            
            if (!alertBox) {
                // 创建提示框
                alertBox = document.createElement('div');
                alertBox.id = 'customAlertBox';
                alertBox.style.position = 'fixed';
                alertBox.style.top = '50%';
                alertBox.style.left = '50%';
                alertBox.style.transform = 'translate(-50%, -50%)';
                alertBox.style.backgroundColor = 'white';
                alertBox.style.padding = '20px';
                alertBox.style.borderRadius = '8px';
                alertBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                alertBox.style.zIndex = '2000';
                alertBox.style.minWidth = '300px';
                alertBox.style.textAlign = 'center';
                alertBox.style.animation = 'fadeIn 0.3s';
                
                // 添加动画样式
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeIn {
                        from { opacity: 0; transform: translate(-50%, -60%); }
                        to { opacity: 1; transform: translate(-50%, -50%); }
                    }
                `;
                document.head.appendChild(style);
                
                // 创建遮罩层
                const overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                overlay.style.zIndex = '1999';
                document.body.appendChild(overlay);
                
                // 不添加标题，直接显示消息
                
                // 创建消息容器
                const messageDiv = document.createElement('div');
                messageDiv.textContent = message;
                messageDiv.style.margin = '15px 0';
                messageDiv.style.fontSize = '16px';
                messageDiv.style.color = '#333';
                alertBox.appendChild(messageDiv);
                
                // 创建确定按钮
                const confirmBtn = document.createElement('button');
                confirmBtn.textContent = '确定';
                confirmBtn.style.backgroundColor = '#4e7bef';
                confirmBtn.style.color = 'white';
                confirmBtn.style.border = 'none';
                confirmBtn.style.padding = '8px 40px';
                confirmBtn.style.borderRadius = '4px';
                confirmBtn.style.fontSize = '14px';
                confirmBtn.style.cursor = 'pointer';
                confirmBtn.style.transition = 'background-color 0.3s';
                
                confirmBtn.onmouseover = function() {
                    this.style.backgroundColor = '#3d6ae8';
                };
                
                confirmBtn.onmouseout = function() {
                    this.style.backgroundColor = '#4e7bef';
                };
                
                confirmBtn.onclick = function() {
                    document.body.removeChild(alertBox);
                    document.body.removeChild(overlay);
                };
                
                alertBox.appendChild(confirmBtn);
                document.body.appendChild(alertBox);
            } else {
                // 更新已存在提示框的消息
                alertBox.querySelector('div:nth-child(1)').textContent = message;
            }
        }
        
        // 验证数量是否为正整数
        function validateQuantity(input) {
            const value = input.value;
            // 检查是否为正整数
            if (value !== '' && (!/^\d+$/.test(value) || parseInt(value) <= 0)) {
                showCustomAlert('数量必须是正整数！');
                input.value = ''; // 清空无效输入
                return false;
            }
            return true;
        }
        
        // 计算行金额
        function calculateRowAmount(row, type) {
            const quantityInput = document.querySelector(`input[name="${type}_quantity_${row}"]`);
            
            // 验证数量是否为正整数
            if (quantityInput && !validateQuantity(quantityInput)) {
                const amountInput = document.querySelector(`input[name="${type}_amount_${row}"]`);
                if (amountInput) {
                    amountInput.value = "0.00";
                }
                calculateSubtotal(type);
                return;
            }
            
            const quantity = parseInt(quantityInput?.value || 0);
            const price = parseFloat(document.querySelector(`input[name="${type}_price_${row}"]`)?.value || 0);
            const amount = quantity * price;
            
            // 设置行金额
            const amountInput = document.querySelector(`input[name="${type}_amount_${row}"]`);
            if(amountInput) {
                amountInput.value = isNaN(amount) ? '' : amount.toFixed(2);
            }
            
            // 计算该类别小计
            calculateSubtotal(type);
        }
        
        // 计算小计
        function calculateSubtotal(type) {
            const amountInputs = document.querySelectorAll(`input[name^="${type}_amount_"]`);
            let subtotal = 0;
            
            amountInputs.forEach(input => {
                if(input.name !== `${type}_total`) {
                    subtotal += parseFloat(input.value || 0);
                }
            });
            
            // 设置小计
            const subtotalInput = document.querySelector(`input[name="${type}_total"]`);
            if(subtotalInput) {
                subtotalInput.value = isNaN(subtotal) ? '' : subtotal.toFixed(2);
            }
            
            // 计算总计
            calculateTotal();
        }
        
        // 计算总计
        function calculateTotal() {
            const subtotals = [
                parseFloat(document.querySelector('input[name="impl_total"]')?.value || 0),
                parseFloat(document.querySelector('input[name="training_total"]')?.value || 0),
                parseFloat(document.querySelector('input[name="testing_total"]')?.value || 0),
                parseFloat(document.querySelector('input[name="management_total"]')?.value || 0)
            ];
            
            const total = subtotals.reduce((sum, val) => sum + (isNaN(val) ? 0 : val), 0);
            const totalInput = document.querySelector('input[name="service_total"]');
            if (totalInput) {
                totalInput.value = total.toFixed(2);
            }
        }
        
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有数量和单价输入添加事件监听
            document.querySelectorAll('input[data-row][data-type]').forEach(input => {
                input.addEventListener('input', function() {
                    const row = this.getAttribute('data-row');
                    const type = this.getAttribute('data-type');
                    calculateRowAmount(row, type);
                });
            });
            
            // 删除行按钮事件
            document.addEventListener('click', function(event) {
                if(event.target.closest('.btn-delete')) {
                    const row = event.target.closest('tr');
                    const inputs = row.querySelectorAll('input[data-type]');
                    if(inputs.length > 0) {
                        const type = inputs[0].getAttribute('data-type');
                        row.remove();
                        
                        // 重新计算序号
                        updateRowNumbers(type);
                        
                        calculateSubtotal(type);
                    }
                }
            });
            
            // 更新行序号
            function updateRowNumbers(type) {
                const rows = document.querySelectorAll(`input[name^="${type}_name_"]`);
                rows.forEach((input, index) => {
                    const rowNumber = index + 1;
                    const row = input.closest('tr');
                    const numberCell = row.cells[0];
                    numberCell.textContent = rowNumber;
                    
                    // 更新该行所有输入的name和data-row属性
                    row.querySelectorAll(`input[name^="${type}_"]`).forEach(input => {
                        const nameParts = input.name.split('_');
                        const lastPart = nameParts.pop();
                        if(!isNaN(lastPart)) {
                            input.name = `${type}_${nameParts.pop()}_${rowNumber}`;
                            if(input.hasAttribute('data-row')) {
                                input.setAttribute('data-row', rowNumber);
                            }
                        }
                    });
                    
                    // 更新textarea
                    row.querySelectorAll(`textarea[name^="${type}_"]`).forEach(textarea => {
                        const nameParts = textarea.name.split('_');
                        const lastPart = nameParts.pop();
                        if(!isNaN(lastPart)) {
                            textarea.name = `${type}_${nameParts.pop()}_${rowNumber}`;
                        }
                    });
                });
            }
            
            // 添加每个类别的添加行按钮事件
            document.addEventListener('click', function(event) {
                const addBtn = event.target.closest('.btn-add');
                if(addBtn) {
                    const categoryType = addBtn.dataset.category;
                    const categoryName = addBtn.dataset.categoryName;
                    
                    // 找到对应类别的最后一行的序号
                    const rows = document.querySelectorAll(`input[name^="${categoryType}_name_"]`);
                    const lastRowNum = rows.length;
                    const newRowNum = lastRowNum + 1;
                    
                    // 创建新行
                    const newRow = document.createElement('tr');
                    newRow.innerHTML = `
                        <td>${newRowNum}</td>
                        <td><input type="text" class="service-input" name="${categoryType}_name_${newRowNum}"></td>
                        <td><textarea class="service-input" name="${categoryType}_desc_${newRowNum}" rows="3"></textarea></td>
                        <td><input type="text" class="service-input" name="${categoryType}_unit_${newRowNum}"></td>
                        <td><input type="number" class="service-input" name="${categoryType}_quantity_${newRowNum}" data-row="${newRowNum}" data-type="${categoryType}"></td>
                        <td><input type="number" class="service-input text-right" name="${categoryType}_price_${newRowNum}" data-row="${newRowNum}" data-type="${categoryType}"></td>
                        <td><input type="text" class="service-input text-right" name="${categoryType}_amount_${newRowNum}" readonly></td>
                        <td class="operation-cell"><span class="btn-delete" title="删除"></span></td>
                    `;
                    
                    // 找到对应类别的表格
                    const categoryContainer = addBtn.closest('.service-category-container');
                    const table = categoryContainer.querySelector('table');
                    const tbody = table.querySelector('tbody');
                    
                    // 找到小计行
                    const subtotalRow = tbody.querySelector(`input[name="${categoryType}_total"]`).closest('tr');
                    
                    // 在小计行之前插入新行
                    tbody.insertBefore(newRow, subtotalRow);
                    
                    // 为新行的数量和单价输入添加事件监听
                    newRow.querySelectorAll('input[data-row][data-type]').forEach(input => {
                        input.addEventListener('input', function() {
                            const row = this.getAttribute('data-row');
                            const type = this.getAttribute('data-type');
                            calculateRowAmount(row, type);
                        });
                    });
                }
            });
            
            // 检查提交按钮状态
            checkSubmitButtonStatus();
            
            // 保存按钮事件
            document.getElementById('saveBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('implementationCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                showCustomAlert('实施服务明细已保存');
            });
            
            // 上一步按钮事件
            document.getElementById('prevBtn').addEventListener('click', function() {
                window.location.href = 'software-dev.html';
            });
            
            // 下一步按钮事件
            document.getElementById('nextBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('implementationCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                window.location.href = 'cloud-service.html';
            });
            
            // "该表不适用于本项目"复选框事件 - 检查元素是否存在
            const notApplicableCheckbox = document.getElementById('notApplicable');
            if (notApplicableCheckbox) {
                notApplicableCheckbox.addEventListener('change', function() {
                const inputs = document.querySelectorAll('.service-input:not([readonly])');
                const deleteButtons = document.querySelectorAll('.btn-delete');
                const addButtons = document.querySelectorAll('.btn-add, #addServiceRow');
                
                if (this.checked) {
                    inputs.forEach(input => {
                        input.disabled = true;
                        input.style.backgroundColor = '#f5f5f5';
                    });
                    deleteButtons.forEach(btn => btn.disabled = true);
                    addButtons.forEach(btn => btn.disabled = true);
                } else {
                    inputs.forEach(input => {
                        input.disabled = false;
                        input.style.backgroundColor = '';
                    });
                    deleteButtons.forEach(btn => btn.disabled = false);
                    addButtons.forEach(btn => btn.disabled = false);
                }
            });
            }
            
            // 初始化计算
            calculateTotal();
            
            // 预览按钮事件
            document.getElementById('previewBtn').addEventListener('click', function() {
                showPreview();
            });
            
            // 导出按钮事件
            document.getElementById('exportBtn').addEventListener('click', function() {
                exportToExcel();
            });
            
            // 关闭模态框按钮事件
            document.querySelector('.modal-close-btn').addEventListener('click', function() {
                document.getElementById('previewModal').style.display = 'none';
            });
            
            // 点击模态框背景关闭模态框
            document.getElementById('previewModal').addEventListener('click', function(event) {
                if (event.target === this) {
                    this.style.display = 'none';
                }
            });
        });

        // 显示预览
        function showPreview() {
            const modalBody = document.querySelector('#previewModal .modal-body');
            let tableHTML = `<table class="preview-table">
                <thead>
                    <tr>
                        <th style="width: 5%;">序号</th>
                        <th style="width: 15%;">服务名称</th>
                        <th style="width: 30%;">服务内容描述</th>
                        <th style="width: 10%;">服务单位</th>
                        <th style="width: 10%;">数量</th>
                        <th style="width: 10%;">单价(万元)</th>
                        <th style="width: 15%;">金额(万元)</th>
                    </tr>
                </thead>
                <tbody>`;
            
            // 获取所有服务类别
            const categories = ['impl', 'training', 'testing', 'management'];
            const categoryNames = ['实施服务', '培训服务', '测试服务', '项目管理'];
            
            // 遍历每个服务类别
            categories.forEach((category, categoryIndex) => {
                // 添加类别标题行
                tableHTML += `<tr class="category-header">
                    <td colspan="7">${categoryNames[categoryIndex]}</td>
                </tr>`;
                
                // 获取该类别下的所有服务行
                const rows = document.querySelectorAll(`input[name^="${category}_name_"]`);
                
                rows.forEach((input, index) => {
                    const rowNumber = index + 1;
                    const row = input.closest('tr');
                    
                    // 获取单元格输入值
                    const serviceName = input.value || '';
                    const serviceDesc = row.querySelector(`textarea[name="${category}_desc_${rowNumber}"]`)?.value || '';
                    const serviceUnit = row.querySelector(`input[name="${category}_unit_${rowNumber}"]`)?.value || '';
                    const quantity = row.querySelector(`input[name="${category}_quantity_${rowNumber}"]`)?.value || '0';
                    const price = row.querySelector(`input[name="${category}_price_${rowNumber}"]`)?.value || '0.00';
                    const amount = row.querySelector(`input[name="${category}_amount_${rowNumber}"]`)?.value || '0.00';
                    
                    // 添加服务行到预览
                    tableHTML += `<tr>
                        <td style="text-align: center;">${rowNumber}</td>
                        <td>${serviceName}</td>
                        <td>${serviceDesc}</td>
                        <td>${serviceUnit}</td>
                        <td style="text-align: right;">${quantity}</td>
                        <td style="text-align: right;">${price}</td>
                        <td style="text-align: right;">${amount}</td>
                    </tr>`;
                });
                
                // 添加小计行
                const subtotal = document.querySelector(`input[name="${category}_total"]`)?.value || '0.00';
                tableHTML += `<tr>
                    <td colspan="6" style="text-align: right;"><strong>${categoryNames[categoryIndex]}小计：</strong></td>
                    <td style="text-align: right;">${subtotal}</td>
                </tr>`;
            });
            
            // 添加总计行
            const total = document.querySelector('input[name="service_total"]')?.value || '0.00';
            tableHTML += `<tr style="background-color: #f0f5ff; font-weight: bold;">
                <td colspan="6" style="text-align: right;">服务费用合计：</td>
                <td style="text-align: right;">${total}</td>
            </tr>`;
            
            tableHTML += `</tbody></table>`;
            modalBody.innerHTML = tableHTML;
            document.getElementById('previewModal').style.display = 'flex';
        }
        
        // 导出到Excel
        function exportToExcel() {
            // 创建数据数组
            const data = [];
            // 添加表头
            data.push([
                '序号', '服务名称', '服务内容描述', '服务单位', '数量', '单价(万元)', '金额(万元)'
            ]);
            
            // 获取所有服务类别
            const categories = ['impl', 'training', 'testing', 'management'];
            const categoryNames = ['实施服务', '培训服务', '测试服务', '项目管理'];
            
            // 遍历每个服务类别
            categories.forEach((category, categoryIndex) => {
                // 添加类别标题行
                data.push([categoryNames[categoryIndex], '', '', '', '', '', '']);
                
                // 获取该类别下的所有服务行
                const rows = document.querySelectorAll(`input[name^="${category}_name_"]`);
                
                rows.forEach((input, index) => {
                    const rowNumber = index + 1;
                    const row = input.closest('tr');
                    
                    // 获取单元格输入值
                    const serviceName = input.value || '';
                    const serviceDesc = row.querySelector(`textarea[name="${category}_desc_${rowNumber}"]`)?.value || '';
                    const serviceUnit = row.querySelector(`input[name="${category}_unit_${rowNumber}"]`)?.value || '';
                    const quantity = parseFloat(row.querySelector(`input[name="${category}_quantity_${rowNumber}"]`)?.value || '0');
                    const price = parseFloat(row.querySelector(`input[name="${category}_price_${rowNumber}"]`)?.value || '0');
                    const amount = parseFloat(row.querySelector(`input[name="${category}_amount_${rowNumber}"]`)?.value || '0');
                    
                    // 添加服务行到数据
                    data.push([
                        rowNumber, serviceName, serviceDesc, serviceUnit, quantity, price, amount
                    ]);
                });
                
                // 添加小计行
                const subtotal = parseFloat(document.querySelector(`input[name="${category}_total"]`)?.value || '0');
                data.push([
                    '', '', '', '', '', `${categoryNames[categoryIndex]}小计:`, subtotal
                ]);
                
                // 添加空行
                data.push(['', '', '', '', '', '', '']);
            });
            
            // 添加总计行
            const total = parseFloat(document.querySelector('input[name="service_total"]')?.value || '0');
            const totalValue = document.querySelector('.total-container .total-value-input')?.value || '0.00';

            data.push(['', '', '', '', '', '服务费用合计:', totalValue]);
            
            // 创建工作表
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            
            // 设置列宽
            worksheet['!cols'] = [
                { wch: 5 }, { wch: 15 }, { wch: 40 }, { wch: 10 }, 
                { wch: 8 }, { wch: 10 }, { wch: 12 }
            ];
            
            // 设置数字格式
            for (let i = 1; i < data.length; i++) {
                const priceCell = 'F' + (i + 1);
                const quantityCell = 'E' + (i + 1);
                const totalCell = 'G' + (i + 1);
                
                if (worksheet[priceCell] && worksheet[priceCell].t === 'n') {
                    worksheet[priceCell].z = '#,##0.00';
                }
                
                if (worksheet[quantityCell] && worksheet[quantityCell].t === 'n') {
                    worksheet[quantityCell].z = '#,##0';
                }
                
                if (worksheet[totalCell] && worksheet[totalCell].t === 'n') {
                    worksheet[totalCell].z = '#,##0.00';
                }
            }
            
            // 创建工作簿并添加工作表
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '实施服务明细');
            
            // 下载Excel文件
            XLSX.writeFile(workbook, '实施服务明细.xlsx');
        }

        // 检查提交按钮状态
        function checkSubmitButtonStatus() {
            // 从localStorage获取所有页面的完成状态
            const basicInfoCompleted = localStorage.getItem('basicInfoCompleted') === 'true';
            const budgetCompleted = localStorage.getItem('budgetCompleted') === 'true';
            const productCompleted = localStorage.getItem('productCompleted') === 'true';
            const softwareCompleted = localStorage.getItem('softwareCompleted') === 'true';
            const implementationCompleted = localStorage.getItem('implementationCompleted') === 'true';
            const cloudCompleted = localStorage.getItem('cloudCompleted') === 'true';
            
            // 只有当所有页面都完成时，才启用提交按钮
            const allCompleted = basicInfoCompleted && budgetCompleted && productCompleted && 
                                softwareCompleted && implementationCompleted && cloudCompleted;
            
            document.getElementById('submitBtn').disabled = !allCompleted;
            
            if (allCompleted) {
                document.getElementById('submitBtn').style.opacity = '1';
            } else {
                document.getElementById('submitBtn').style.opacity = '0.6';
            }
        }

        // 提交按钮功能
        document.getElementById('submitBtn').addEventListener('click', function() {
            if (!this.disabled) {
                showCustomConfirm('确认提交项目申报审核吗？提交后将不能再修改。', function(confirmed) {
                    if (confirmed) {
                        showCustomAlert('项目申报已提交审核，请等待审核结果。');
                        setTimeout(function() {
                            window.location.href = '../project-submit.html';
                        }, 1500);
                    }
                });
            }
        });
    </script>
</body>
</html> 